<style scoped>
</style>
<!--  -->
<template>
  <div class="product-base">
    <el-form-item label="产品名称" style="min-width:280px;max-width:930px;" prop="base.title">
      <el-input v-model="product.base.title" size="medium" placeholder="输入不能超过200个字符" maxlength="200"></el-input>
    </el-form-item>
    <ItemCustomizeURL :system="system" :customizeUrl="product.customLink" :pageTitle="pageTitle" :pageid="product.base.id" ref="customLink"/>
    <el-form-item label="产品分类" v-if="system && system.systemType && system.systemType.id === 3"
      style="min-width:280px;max-width:930px;">
      <el-select size="medium" v-model="product.categoryIds" placeholder="未定义" :multiple="true" style="width:100%;">
        <template v-for="item in categories[0]">
          <el-option :key="item.id" :label="item.name" :value="item.id"></el-option>
          <template v-for="ite in categories[item.id]">
            <el-option style="padding-left:36px;" :key="ite.id" :label="ite.name" :value="ite.id"></el-option>
            <template v-for="it in categories[ite.id]">
              <el-option style="padding-left: 54px;" :key="it.id" :label="it.name" :value="it.id"></el-option>
            </template>
          </template>
        </template>
      </el-select>
    </el-form-item>

    <el-form-item label="发布时间" style="min-width:280px;max-width:930px;">
      <el-date-picker v-model="product.base.releasedAt" v-datetime-format type="datetime" placeholder="请选择发布时间" size="medium"
        style="width:100%;">
      </el-date-picker>
    </el-form-item>

    <el-form-item label="排序序号" style="min-width:280px;max-width:930px;">
      <el-input v-model="product.base.orderNum" type="number" size="medium" placeholder="输入数字" min="0"
          max="9223372036854775807" onkeyup="value=value.replace(/[^\d]/g,'')" class="changHgh"></el-input>
    </el-form-item>

    <el-form-item label="是否显示" style="margin-top:-5px; margin-bottom:10px;">
      <el-switch v-model="product.base.isShow" active-color="#13ce66">
      </el-switch>
    </el-form-item>

    <el-form-item label="是否置顶" style="margin-top:-5px; margin-bottom:10px;">
      <el-switch v-model="product.base.isTop" active-color="#13ce66">
      </el-switch>
    </el-form-item>

    <el-form-item label="产品价格文本" style="min-width:280px;max-width:930px;" prop="base.priceString">
      <el-input v-model="product.base.priceString" size="medium" placeholder="输入不能超过200个字符" maxlength="200"></el-input>
    </el-form-item>

    <el-form-item label="产品简介" style="min-width:180px;max-width:930px;">
      <el-input v-model="product.base.info" type="textarea" size="medium" placeholder="输入产品内容简介" maxlength="65535"
        :rows="5"></el-input>
    </el-form-item>
  </div>
</template>

<script>
import ItemCustomizeURL from '@/components/main/user/system/common/ItemCustomizeURL.vue'
export default {
  props: {
    categories: {
      type: Object
    },
    system: {
      type: Object
    },
    product: {
      type: Object
    },
    category: {
      type: Array
    }
  },
  data () {
    return {
    }
  },
  computed: {
    pageTitle () {
      return this.product.base.title
    }
  },
  methods: {
    getCustomLink () {
      let itemCustomLinkInfo = this.$refs['customLink'].customUrl()
      return itemCustomLinkInfo
    }
  },
  components: {
    ItemCustomizeURL
  }
}

</script>
